// 全局的向左偏移的像素
let left = 0;
// 偏移后距离下一次偏移的时间（毫秒数）
let time = 20;
// 轮播的图片数量
let imgCount;
// 轮播图的宽度，不要设置成质数（只能被0和它自己整除）
const imgWidth = 980;

/**
 * 页面加载完之后做的动作
 */
$(document).ready(function(){
	initShowOrHide();
	/* 轮播图 */
	initBanner();
	/* tab页 */
	initTabs();
});

function initBanner() {
	imgCount = $('.banner>ul.imgList img').length - 1;
	moveLeft();
}

/**
 * 延迟递归执行
 */
function moveLeft() {
	// 设置left的下限，如果一旦达到这个下限，就让left重新变成0
	// 0、-980、-2*980、-3*980、-4*980
	if (left <= -imgCount * imgWidth) {
		left = 0;
	}
	time = (left % imgWidth === 0) ? 2000 : 20;
	$('.banner>ul.imgList').css('margin-left', left + 'px');
	// 判断当前是在滚动第几张图片，0-3
	let index = Math.floor(-left / imgWidth);
	// 切换ico
	changeIco(index);
	// -11 -22 -33 -44... 能不能到 -980 -1960 ？
	left -= 10; // 每次偏移的像素，变大速度就加快，这个数值只能被imgWidth整除
	setTimeout(moveLeft, time); // 偏移的间隔，变大速度会减慢
}

function changeImg(count) {
	let left_temp = -imgWidth * count;
	$('.banner>ul.imgList').css('margin-left', left_temp + 'px');
	changeIco(count);
	left = left_temp;
}

function changeIco(count) {
	$('.banner>ul.icoList p').css('background-color', 'rgba(0, 0, 0, 0.5)')
		.eq(count).css('background-color', 'rgb(255, 0, 0)');
}


function prevTo() {
	// 计算当前图片张数
	let index = Math.floor(-left / imgWidth);
	let prev = index - 1;
	// 如果index是0（当前是第一张图片），prev应该等于imgCount - 1（最后一张图片）
	if (index === 0) {
		prev = imgCount - 1;
	}
	changeImg(prev);
}

function nextTo() {
	// 计算当前图片张数
	let index = Math.floor(-left / imgWidth);
	let next = index + 1;
	// 如果index是imgCount - 1（当前是最后一张图片），next应该等于0（第一张图片）
	if (index === imgCount - 1) {
		next = 0;
	}
	changeImg(next);
}

function initShowOrHide() {
	$('.top_bg>.top>ul.right>li.list').mouseover(function(){
		$('.top_bg>.top>ul.right>li.list>div').show();
	}).mouseout(function(){
		$('.top_bg>.top>ul.right>li.list>div').hide();
	});
}

function initTabs() {
	// 所有的tab页里面的表格隐藏，第一个表格显示
	$('.tabs>.tabs_content>table').hide().eq(0).show();
	let tabs = $('.tabs>.tabs_head>ul>li>a');
	// 给7个tab对应的a标签设置点击事件
	// 点第一个a标签，给第一个a标签套上class:selected
	for (let i = 0; i < tabs.length; i ++) {
		tabs.eq(i).click(function(){
			// 去掉所有a标签的class:selected，加在第i个a标签上面
			tabs.removeClass('selected').eq(i).addClass('selected');
			// 所有的tab页里面的表格隐藏，第i个表格显示
			$('.tabs>.tabs_content>table').hide().eq(i).show();
		});
	}
}